<script setup lang="ts">
import { $t } from '@/locales';

defineOptions({ name: 'LoginLogInfoDialog' });

interface Props {
  logInfo: Api.System.LoginLog.LoginLogRecord | null;
}

defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

// 关闭对话框
function closeDialog() {
  visible.value = false;
}
</script>

<template>
  <ElDialog v-model="visible" title="登录日志详情" width="1000" :close-on-click-modal="false">
    <ElDescriptions :column="1" border label-width="100">
      <ElDescriptionsItem label="用户名">
        {{ logInfo?.username }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="登录IP">
        {{ logInfo?.ipAddr }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="登录地点">
        {{ logInfo?.ipDesc }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="客户端类型">
        {{ logInfo?.clientType }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="登录状态">
        <ElTag :type="logInfo?.status === 'SUCCESS' ? 'success' : 'danger'">
          {{ logInfo?.status === 'SUCCESS' ? '登录成功' : '登录失败' }}
        </ElTag>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="登录信息">
        {{ logInfo?.message }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="登录时间">
        {{ logInfo?.loginTime }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="登录异常">
        <ElInput readonly type="textarea" :rows="5" :model-value="logInfo?.exceptionTrace || '无'" />
      </ElDescriptionsItem>
    </ElDescriptions>
    <template #footer>
      <ElButton @click="closeDialog">{{ $t('common.close') }}</ElButton>
    </template>
  </ElDialog>
</template>

<style scoped>
:deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>
